<template>
  <view class="flex flex-column">
    <!-- 头部 -->
    <yHeader
      :current="0"
      :screenWidth="screenWidth"
      :isTabs="false"
      @Tabs="handleTabs"
    ></yHeader>
    <view class="flex justify-center py-4" style="height: 100%">
      <view class="content bg-white border border-grey shadow">
        <el-tabs v-model="activeName">
          <el-tab-pane label="忘记密码" name="first">
            <el-form
              ref="form"
              :model="form"
              label-width="80px"
              label-position="top"
              :rules="rules"
            >
              <el-form-item label="请输入手机号" prop="phone">
                <el-input
                  v-model="form.phone"
                  placeholder="请输入手机号"
                  prefix-icon="el-icon-lock"
                  class="input—x"
                ></el-input>
              </el-form-item>
              <el-form-item label="请输入验证码" prop="code">
                <view class="flex align-center">
                  <el-input
                    v-model="form.code"
                    placeholder="请输入验证码"
                    prefix-icon="el-icon-lock"
                    class="input—x"
                  >
                  </el-input>
                  <el-button
                    style="margin-top: 0"
                    type="success"
                    class="btn bg-success btn2"
                    >获取验证码</el-button
                  >
                </view>
              </el-form-item>
              <el-form-item label="请输入新密码" prop="newPassword">
                <el-input
                  type="password"
                  v-model="form.newPassword"
                  placeholder="请输入新密码"
                  prefix-icon="el-icon-lock"
                  class=""
                ></el-input>
              </el-form-item>
              <el-form-item label="再次输入新密码" prop="newPasswordII">
                <el-input
                  type="password"
                  v-model="form.newPasswordII"
                  placeholder="再次输入新密码"
                  prefix-icon="el-icon-lock"
                  class=""
                ></el-input>
              </el-form-item>
              <view class="foot">
                <el-button type="success" @click="handleTabs('/pages/login/login')" class="btn bg-success"
                  >登录</el-button
                >
                <el-button
                  type="success"
                  @click="handleSubmit"
                  class="btn bg-success"
                  >确定</el-button
                >
              </view>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </view>
    </view>
  </view>
</template>

<script>
const app = getApp();
import yHeader from "@/components/yHeader.vue";
import yFooter from "@/components/yFooter.vue";
import { Notification } from "element-ui";
import { Login } from "@/api/login.js";
export default {
  components: {
    yHeader,
    yFooter,
  },
  data() {
    return {
      screenWidth: uni.getSystemInfoSync().windowWidth,
      ThemeColors: app.globalData.ThemeColors,
      activeName: "first",
      form: {
        phone: "",
        newPassword: "",
        newPasswordII: "",
        code: "",
      },
      back: false,
      rules: {
        phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
        ],
        newPasswordII: [
          { required: true, message: "请再次输入新密码", trigger: "blur" },
          { validator: this.validatePasswordII, trigger: "blur" },
        ],
      },
    };
  },
  onLoad(options) {},
  methods: {
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 当表单验证通过时执行的逻辑
          // 在这里可以进行表单提交或其他操作
        } else {
          // 当表单验证不通过时执行的逻辑
          // 可以在这里给出提示或其他处理方式
          this.$message.error("表单验证不通过，请检查输入信息！");
        }
      });
    },
    validatePasswordII(rule, value, callback) {
      if (value !== this.form.newPassword) {
        callback(new Error("再次输入的新密码与前一次输入的新密码不一致"));
      } else {
        callback();
      }
    },
    handleTabs(url) {
      uni.navigateTo({
        url,
      });
    },
    Register() {
      uni.navigateTo({
        url: "/pages/login/register",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 800rpx;
  padding: 20rpx 60rpx 32rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin: auto auto;
  .el-tabs {
    width: 100%;
    height: 100%;
  }

  .btn {
    background-color: #28a745 !important;
    margin-top: 20px;
  }

  .btn2 {
    width: 230rpx;
  }

  p {
    display: flex;
    margin: 40rpx 0;
    line-height: 34rpx;
    font-size: 24rpx;
    color: #646464;
    justify-content: space-between;

    text {
      cursor: pointer;
    }

    text:hover {
      color: #28a745;
    }
  }
  .foot {
    display: flex;
    justify-content: space-around;
  }
  /deep/ .el-form-item__content {
    display: flex;
  }
  /deep/ .el-form-item {
    margin-bottom: 25rpx;
  }
  /deep/ .el-form-item__label {
    padding: 0;
  }
}
</style>